<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-user"></i> 机构管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-form ref="searchForm" :model="searchForm" inline label-width="80px">
                <el-form-item>
                    <el-input v-model="searchForm.name" placeholder="输入机构名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="searchSubmit">搜索</el-button>
                </el-form-item>
                <el-form-item style="margin-left: 5%">
                    <el-button type="success" icon="el-icon-plus" @click="showDialog = true">添加机构</el-button>
                </el-form-item>
            </el-form>
            <!-- 表格 -->
            <el-table
                :data="OrganizationData.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                border
                style="width: 100%; font-size: 15px"
            >
                <el-table-column prop="ORGBM" label="机构编码" min-width="60"></el-table-column>
                <el-table-column prop="ORGMC" label="机构名称" min-width="60"></el-table-column>
                <el-table-column prop="LXDH" label="电话" min-width="60"></el-table-column>
                <el-table-column prop="ADDRESS" label="地址" min-width="100"></el-table-column>
                <el-table-column prop="BZ" label="备注" min-width="100"></el-table-column>
                <el-table-column label="操作" min-width="200">
                    <template slot-scope="scope">
                        <el-button type="success" icon="el-icon-edit" size="mini" @click="editOrgization(scope.$index, scope.row)"
                            >编辑</el-button
                        >
                        <el-button type="danger" icon="el-icon-delete" size="mini" @click="delOrganization(scope.row)">删除</el-button>
                        <el-button type="warning" @click="distributionSubmit(scope.row)">分配角色</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 15]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="OrganizationData.length"
            >
            </el-pagination>
            <!-- 弹层 -->
            <el-dialog
                :title="isEdit ? '编辑机构信息' : '添加机构'"
                :visible.sync="showDialog"
                width="37%"
                center
                :close-on-click-modal="false"
                :close-on-press-escape="false"
                @close="closeFn"
            >
                <el-form ref="organizationForm" :model="organizationForm" :rules="rules" label-width="80px" label-position="right">
                    <el-form-item label="机构编码" prop="ORGBM">
                        <el-input v-model="organizationForm.ORGBM" disabled placeholder="机构编码" style="width: 87%"></el-input>
                    </el-form-item>
                    <el-form-item label="机构名称" prop="ORGMC">
                        <el-input v-model="organizationForm.ORGMC" placeholder="机构名称" style="width: 87%" />
                    </el-form-item>
                    <el-form-item label="地址" prop="ADDRESS">
                        <el-input v-model="organizationForm.ADDRESS" placeholder="地址" style="width: 87%" />
                    </el-form-item>
                    <el-form-item label="电话" prop="LXDH">
                        <el-input v-model="organizationForm.LXDH" placeholder="电话" style="width: 87%" />
                    </el-form-item>
                    <el-form-item label="备注" prop="BZ">
                        <el-input v-model="organizationForm.BZ" placeholder="备注" style="width: 87%" />
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="showDialog = false">取 消</el-button>
                    <el-button type="primary" @click="onSubmit">确 定</el-button>
                </div>
            </el-dialog>
            <!-- 分配角色弹层 -->
            <el-dialog
                title="分配角色"
                :visible.sync="roleChose"
                width="37%"
                center
                :close-on-click-modal="false"
                :close-on-press-escape="false"
                @close="closeRoleFn"
            >
                <el-form ref="userForm" :model="userForm" label-width="80px" label-position="right">
                    <el-form-item label="角色" prop="role">
                        <el-select v-model="userForm.role" placeholder="请选择角色">
                            <el-option
                                v-for="roleItem in RoleIDList"
                                :label="roleItem.roleMc"
                                :value="roleItem.roleId"
                                :key="roleItem.roleId"
                            />
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="roleChose = false">取 消</el-button>
                    <el-button type="primary" @click="roleChoseSubmit">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import { getOrganizationAPI, orgSyncAPI, getOrgRoleAPI, getRoleListAPI } from '@/api/backStage.js';
export default {
    name: 'personnel',
    data() {
        return {
            currentPage: 1, //初始页
            pagesize: 10, // 每页的数据
            isEdit: false, // 是否为编辑状态
            showDialog: false, // 弹层显示
            roleChose: false,
            searchForm: {
                name: ''
            },
            tableItemID: '',
            OrganizationData: [],
            userForm: {
                role: ''
            },
            RoleIDList: [],
            organizationForm: {
                ORGBM: '', // 机构编码
                ORGMC: '', // 机构名称
                LXDH: '', // 电话
                BZ: '',
                ADDRESS: '' // 地址
            },
            rules: {
                name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }]
            }
        };
    },
    mounted() {
        this.getOrganizationData();
        this.getRoleListData();
    },
    methods: {
        // 初始页currentPage、初始每页数据数pagesize和数据data
        handleSizeChange: function(size) {
            this.pagesize = size;
        },
        handleCurrentChange: function(currentPage) {
            this.currentPage = currentPage;
        },
        // 获取角色管理列表
        async getRoleListData() {
            let res = await getRoleListAPI({
                token: this.$store.state.user.token,
                mc: 'null'
            });
            if (res.code == 'succ') {
                // 赋值
                this.RoleIDList = res.result;
            }
        },
        // 获取机构列表信息
        async getOrganizationData() {
            let res = await getOrganizationAPI({
                token: this.$store.state.user.token,
                OrgBM: 'null',
                OrgMC: 'null',
                OrgFJ: 'null',
                OrgLX: 'null'
            });
            if (res.code == 'succ') {
                this.OrganizationData = res.result;
            }
        },
        // 机构搜索
        async searchSubmit() {
            const res = await getOrganizationAPI({
                token: this.$store.state.user.token,
                OrgBM: 'null',
                OrgMC: this.searchForm.name || 'null',
                OrgFJ: 'null',
                OrgLX: 'null'
            });

            if (res.code == 'succ') {
                this.$message.success(res.message);
                this.OrganizationData = res.result;
                this.searchForm.name = '';
            } else {
                this.$message.error(res.message);
                this.searchForm.name = '';
            }
        },
        // 提交
        async onSubmit() {
            this.$refs.organizationForm.validate(value => {
                if (value) {
                    this.isEdit ? this.editInfo() : this.addInfo();
                    this.showDialog = false;
                }
            });
        },
        // 添加机构
        async addInfo() {
            this.showDialog = false;
            let res = await orgSyncAPI({
                OPRID: this.$store.state.user.oprid,
                token: this.$store.state.user.token,
                CZLX: 'add',
                Params: {
                    ORGBM: this.organizationForm.ORGBM,
                    ORGMC: this.organizationForm.ORGMC,
                    ORGXH: 'null',
                    ORGLX: 'null',
                    ADDRESS: this.organizationForm.ADDRESS,
                    LXDH: this.organizationForm.LXDH,
                    BZ: this.organizationForm.BZ,
                    FBM: '',
                    ORGFJ: ''
                }
            });
            if (res.code == 'succ') {
                this.$message.success('添加成功');
                this.getOrganizationData();
            } else {
                this.$message.error(res.message);
            }
        },

        // 编辑按钮
        editOrgization(index, row) {
            this.isEdit = true;
            this.showDialog = true;
            this.organizationForm = { ...row }; // 数据回填
            this.tableItemID = index;
        },
        // 编辑机构
        async editInfo() {
            var editData = this.tableItemID;
            this.OrganizationData[editData].ORGBM = this.organizationForm.ORGBM;
            this.OrganizationData[editData].ORGMC = this.organizationForm.ORGMC;
            this.OrganizationData[editData].LXDH = this.organizationForm.LXDH;
            this.OrganizationData[editData].ADDRESS = this.organizationForm.ADDRESS;
            this.OrganizationData[editData].BZ = this.organizationForm.BZ;
            const obj = {
                ORGBM: this.organizationForm.ORGBM,
                ORGMC: this.organizationForm.ORGMC,
                ORGXH: 'null',
                ORGLX: 'null',
                ADDRESS: this.organizationForm.ADDRESS,
                LXDH: this.organizationForm.LXDH,
                BZ: this.organizationForm.BZ,
                FBM: 'null',
                ORGFJ: 'null'
            };

            let res = await orgSyncAPI({
                OprID: this.$store.state.user.oprid,
                token: this.$store.state.user.token,
                CZLX: 'update',
                Params: obj
            });
            if (res.code == 'succ') {
                this.$message.success('修改成功');
                this.getOrganizationData();
            } else {
                this.$message.error(res.message);
            }
        },
        // 删除机构
        async delOrganization(row) {
            let res = await orgSyncAPI({
                OPRID: this.$store.state.user.oprid,
                token: this.$store.state.user.token,
                CZLX: 'del',
                Params: {
                    ORGBM: row.ORGBM,
                    ORGMC: row.ORGMC,
                    ORGXH: 'null',
                    ORGLX: 'null',
                    ADDRESS: row.ADDRESS,
                    LXDH: row.LXDH,
                    BZ: row.BZ,
                    FBM: '',
                    ORGFJ: ''
                }
            });
            if (res.code == 'succ') {
                this.$message.success('删除成功');
                this.getOrganizationData();
            } else {
                this.$message.error(res.message);
            }
        },
        // 机构分配角色
        // 分配按钮的点击事件
        distributionSubmit(row) {
            this.rowInfo = row;
            this.roleChose = true;
        },
        // 分配角色
        async roleChoseSubmit() {
            let res = await getOrgRoleAPI({
                token: this.$store.state.user.token,
                OrgID: this.rowInfo.ORGBM,
                RoleID: this.userForm.role
            });
            if (res.code == 'succ') {
                this.$message.success(res.message);
                this.roleChose = false;
                this.userForm.role = '';
            } else {
                this.$message.error(res.message);
                this.roleChose = false;
                this.userForm.role = '';
            }
        },
        // 关闭弹窗的回调
        closeFn() {
            this.organizationForm = {};
            this.isEdit = false;
            this.$refs.organizationForm.resetFields();
        },
        closeRoleFn() {
            this.userForm = {};
        }
    }
};
</script>

<style scoped></style>
